<template>
  <el-form-item :class="getClz()" :prop="opt.name" v-if="!opt.hide" v-bind="opt.itemProps">
    <div slot="label" style="display: inline-block" v-if="opt.text">{{opt.text}}<el-popover v-if="Boolean(opt.textLabel)" placement="top" trigger="hover"><div>{{opt.textLabel}}</div><i slot="reference" class="el-icon-warning" /></el-popover></div>
    <el-input v-model="data[opt.name]"
      :name="opt.name"
      :placeholder="opt.props.disabled?'':opt.placeholder"
      v-bind="opt.props"
      :show-word-limit="Boolean(opt.props.maxlength)"
      @blur="onBlur(data,column)"
      @change="onChange(data,column)"
      @keyup.enter.native="onKeyup(data,column)"
      @dblclick.native="onDblclick(data,column)"
    >
      <i v-if="opt.prefix" @click="triggerClick('prefixClick')" slot="prefix">{{opt.prefix}}</i>
      <i v-if="opt.suffix" @click="triggerClick('suffixClick')" slot="suffix">{{opt.suffix}}</i>
      <i v-if="opt.prepend" @click="triggerClick('prependClick')" slot="prepend">{{opt.prepend}}</i>
      <i v-if="opt.append" @click="triggerClick('appendClick')" slot="append">{{opt.append}}</i>
    </el-input>
  </el-form-item>
</template>

<script>
    import extend from '../extend';

    export default {
      name: "FormInput",
      mixins:[extend],
      data(){
        return {
          opt:{
            name:'',
            text:'',
            textLabel:'',
            className:'',
            itemProps:{},
            props:{
              type:'text',
              disabled:false
            },
            hide:false,
            placeholder:'',
            formatter:(v)=>{return v}
          }
        }
      },
      created(){
        this.onBlur = this.column.onBlur||LOG;
        this.onChange = this.column.onChange||LOG;
        this.onKeyup = this.column.onKeyup||LOG;
        this.onDblclick = this.column.onDblclick||LOG;
      },
      methods:{
        setValue(val){
          this.data[this.opt.name] = this.opt.formatter(val);
        }
      }
    }
</script>
